<template>
  <div>
    <h2>App: {{ name }} - {{ counter }}</h2>
    <button @click="increment">+1</button>
    <home></home>
  </div>
</template>

<script>
import { provide, ref, readonly } from "vue";
import Home from "./Home.vue";
export default {
  components: {
    Home,
  },
  setup() {
    const name = ref("pengfan");
    let counter = ref(100);

    provide("name", readonly(name));
    provide("counter", readonly(counter));

    const increment = () => {
      counter.value++;
    };

    return {
      name,
      counter,
      increment,
    };
  },
};
</script>

<style scoped>
</style>